<template>
  <div class="account">
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-form :model="model" size="small" ref="form" label-width="100px">
        <h3 class="bb1"><svg-icon icon-class="account"></svg-icon>账号信息
          <span class="err fz12" v-if="roles[0] > 0 && status === 0">*  账号未启用，请先提交银行账号信息进行审核，审核通过后开启账号。</span>
          <span class="err fz12" v-if="roles[0] > 0 && status === -100">*  银行账号信息未通过审核，请重新提交。未通过原因：{{ err_info }}</span>
          <span class="tip fz12" v-if="roles[0] > 0 && status === 100">资料审核中，请耐心等待。</span>
          <span class="succ fz12" v-if="roles[0] > 0 && status === 200">审核已通过。</span>
        </h3>
        <el-form-item label="管理员：" required>
          <span class="fz12">{{ model.agent_name }}</span>
        </el-form-item>
        <el-form-item label="代理商编号：" required>
          <span class="fz12">{{ model.agent_num }}</span>
        </el-form-item>
        <el-form-item label="代理区域：" required>
          <span class="fz12">{{ model.agent_region }}</span>
        </el-form-item>
        <el-form-item label="上级代理商：" required>
          <span class="fz12">{{ model.p_agent_name }}</span>
        </el-form-item>
        <el-form-item label="登录用户名：" required>
          <span class="fz12">{{ model.username }}</span>
        </el-form-item>
        <el-form-item label="登录密码：" required>
          <span class="fz12">{{ model.password }}</span>
          <el-button type="warning" size="mini" @click="dialog_show = true">修改密码</el-button>
        </el-form-item>
    </el-form>
    <el-form :model="form" size="small" ref="form" label-width="100px" :rules="rules">
        <h3 class="bb1"><svg-icon icon-class="bank"></svg-icon>银行账号信息</h3>
        <el-form-item label="开户名：" prop="bank_name">
          <el-input class="w240" v-model="form.bank_name" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="银行卡号：" prop="bank_num">
          <el-input class="w240" v-model="form.bank_num" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="开户行：" prop="bank_code">
          <el-select placeholder="请输入开户行关键字" v-model="form.bank_code" class="w240" filterable remote :remote-method="handleBankNameMethod" :loading="banksLoading">
            <el-option v-for="item in banks" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开户支行：" prop="bank_branch_code">
          <el-select placeholder="请输入支行关键字" v-model="form.bank_branch_code" class="w240" filterable remote :remote-method="handleRemoteMethod" :loading="remoteLoading">
          <el-option v-for="item in sub_banks" :key="item.value" :value="item.value" :label="item.label"></el-option>
        </el-select>
        </el-form-item>
        <div>
          <label class="el-form-item__label" style="width: 90px"><span class="err">*</span>上传证件</label>
          <el-form-item class="db" label-width="0">
            <el-upload class="uploader" :action="url" :show-file-list="false" :before-upload="handleBeforeUpload" :on-success="handleSuccessPosPhoto">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img v-if="form.posphoto" :src="form.posphoto" alt="">
              <p class="fz12"><span class="err">*</span>身份证正面</p>
            </el-upload>
          </el-form-item>
          <el-form-item class="db" label-width="0">
            <el-upload class="uploader" :action="url" :show-file-list="false" :before-upload="handleBeforeUpload" :on-success="handleSuccessSidePhoto">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img v-if="form.sidephoto" :src="form.sidephoto" alt="">
              <p class="fz12"><span class="err">*</span>身份证反面</p>
            </el-upload>
          </el-form-item>
          <el-form-item class="db" label-width="0">
            <el-upload class="uploader" :action="url" :show-file-list="false" :before-upload="handleBeforeUpload" :on-success="handleSuccessHandPhoto">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img v-if="form.handheld" :src="form.handheld" alt="">
              <p class="fz12"><span class="err">*</span>手持身份证</p>
            </el-upload>
          </el-form-item>
          <el-form-item class="db" label-width="0">
            <el-upload  class="uploader" :action="url" :show-file-list="false" :before-upload="handleBeforeUpload" :on-success="handleSuccessBankPhoto">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img v-if="form.bankphoto" :src="form.bankphoto" alt="">
              <p class="fz12"><span class="err">*</span>银行卡正面</p>
            </el-upload>
          </el-form-item>
        </div>
        <el-form-item label="">
          <el-button size="small" type="primary" @click="handleClickSubmit" :loading="loading">提交审核</el-button>
        </el-form-item>
        
    </el-form>
    <el-dialog :visible.sync="dialog_show" width="400px" title="修改密码" size="small">
      <el-form :model="dialog" :rules="d_rules" ref="dialog" size="small" label-width="90px">
        <el-form-item label="手机号：" required>
          <span class="fz12">{{ model.username }}</span>
        </el-form-item>
        <el-form-item label="验证码：" prop="code">
          <el-input v-model="dialog.code" placeholder="验证码" class="w100" :disabled="dialog_disabled"></el-input>
          <el-button type="warning" size="small" v-if="sendShow" @click="handleSendMes">获取验证码</el-button>
          <el-button type="warning" size="small" disabled v-else>{{ count }}S获取验证码</el-button>
        </el-form-item>
        <el-form-item label="新密码：" prop="password">
          <el-input v-model="dialog.password" type="password" :disabled="dialog_disabled" placeholder="新密码不少于6位" class="w240"></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="vpassword">
          <el-input v-model="dialog.vpassword" type="password" :disabled="dialog_disabled" placeholder="再次确认新密码" class="w240"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="info" size="small" @click="handleClickReset">取消</el-button>
        <el-button type="primary" size="small" @click="handleClickEditPwdSub">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { validChinese } from '@/utils/validate'
import { GetSearchBankList, remoteMethodQuery } from '@/api/shop'
import { accountInit, accountBankInit, accountBankSubmit, GetSmsCode, AccountEditPwd } from '@/api/setting'
import Breadcrumb from '@/components/Breadcrumb'

export default {
  components: {
    Breadcrumb
  },
  data() {
    const VALIDCHINESE = (rule, value, callback) => {
      if (validChinese(value)) {
        callback()
      } else {
        callback(new Error('格式不对哦~'))
      }
    }
    const VALIDPWD = (rule, value, callback) => {
      if (value && value.length >= 6) {
        callback()
      } else {
        callback(new Error('格式不对哦~'))
      }
    }
    const CONFIRMPWD = (rule, value, callback) => {
      if (value && value.length >= 6) {
        if (value === this.dialog.password) {
          callback()
        } else {
          callback(new Error('两次密码不一致哦~'))
        }
      } else {
        callback(new Error('格式不对哦~'))
      }
    }
    return {
      show: false,
      loading: false,
      sendShow: true,
      dialog_show: false,
      banksLoading: false,
      remoteLoading: false,
      dialog_disabled: true,
      count: null,
      timer: null,
      status: null,
      err_info: null,
      url: process.env.BASE_API + '/merchant/uploadCommer',
      banks: [],
      sub_banks: [],
      model: {
        agent_name: '',
        agent_num: '',
        agent_region: '',
        p_agent_name: '',
        username: '',
        password: ''
      },
      form: {
        bank_num: '',
        bank_name: '',
        bank_branch_code: '',
        bank_code: '',
        posphoto: '',
        sidephoto: '',
        handheld: '',
        bankphoto: ''
      },
      dialog: {
        phone: '',
        code: '',
        password: '',
        vpassword: ''
      },
      rules: {
        bank_num: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        bank_name: [{ required: true, trigger: 'blur', validator: VALIDCHINESE }],
        bank_code: [{ required: true, trigger: 'change', message: '必须选择哦~' }],
        bank_branch_code: [{ required: true, trigger: 'change', message: '必须选择哦~' }]
      },
      d_rules: {
        code: [{ required: true, trigger: 'blur', message: '必须填写' }],
        password: [{ required: true, trigger: 'blur', validator: VALIDPWD }],
        vpassword: [{ required: true, trigger: 'blur', validator: CONFIRMPWD }]
      }
    }
  },
  methods: {
    handleRemoteMethod(query) {
      if (query !== '' && query.length >= 4) {
        this.remoteLoading = true
        remoteMethodQuery(query).then(response => {
          this.sub_banks = response.data.result
          this.remoteLoading = false
        })
      }
    },
    handleBankNameMethod(query) {
      if (query && query.length >= 4) {
        this.banksLoading = true
        GetSearchBankList(query).then(response => {
          this.banks = response.data.result
          this.banksLoading = false
        })
      }
    },
    handleBeforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 1MB！!')
      }
      return isJPG && isLt2M
    },
    handleSuccessPosPhoto(res) {
      this.form.posphoto = res.result
    },
    handleSuccessSidePhoto(res) {
      this.form.sidephoto = res.result
    },
    handleSuccessHandPhoto(res) {
      this.form.handheld = res.result
    },
    handleSuccessBankPhoto(res) {
      this.form.bankphoto = res.result
    },
    handleSendMes() {
      const TIME_COUNT = 60
      GetSmsCode().then(response => {
        if (response.data.errorCode === 0) {
          this.$message.success(response.data.errorMsg)
          this.dialog_disabled = false
          if (!this.timer) {
            this.count = TIME_COUNT
            this.sendShow = false
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--
              } else {
                this.sendShow = true
                clearInterval(this.timer)
                this.timer = null
              }
            }, 1000)
          }
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    },
    handleClickReset() {
      this.dialog_show = false
      this.$refs['dialog'].resetFields()
    },
    handleClickEditPwdSub() {
      AccountEditPwd(this.model.username, this.dialog).then(res => {
        if (res.data.errorCode === 0) {
          this.$message.success(res.data.errorMsg)
          this.dialog_show = false
          this.$refs['dialog'].resetFields()
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleClickSubmit() {
      accountBankSubmit(this.form).then(res => {
        if (res.data.errorCode === 0) {
          this.$message.success('提交成功，请耐心等待审核~')
          this.$router.go(-1)
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    }
  },
  mounted() {
    accountInit().then(res => {
      if (res.data.errorCode === 0) {
        this.model.agent_name = res.data.result.agent_name
        this.model.agent_num = res.data.result.agent_num
        this.model.agent_region = res.data.result.agent_region
        this.model.p_agent_name = res.data.result.p_agent_name
        this.model.username = res.data.result.username
        this.model.password = res.data.result.password
        this.status = res.data.result.bank_check_status
        this.err_info = res.data.result.bank_chk_info
      } else {
        this.$message.error(res.data.errorMsg)
      }
    })
    accountBankInit().then(res => {
      if (res.data.errorCode === 0) {
        this.form.bank_name = res.data.result.bank_accout_name
        this.form.bank_num = res.data.result.bank_account_no
        this.banks = [{ value: res.data.result.deposit_bank.code, label: res.data.result.deposit_bank.name }]
        this.sub_banks = [{ value: res.data.result.sub_bank.code, label: res.data.result.sub_bank.name }]
        this.form.bank_code = res.data.result.deposit_bank.code
        this.form.bank_branch_code = res.data.result.sub_bank.code
        this.form.posphoto = res.data.result.photos.posphoto
        this.form.sidephoto = res.data.result.photos.sidephoto
        this.form.handheld = res.data.result.photos.handheld
        this.form.bankphoto = res.data.result.photos.bankphoto
      }
    })
  },
  computed: {
    roles() {
      return this.$store.getters.roles
    }
  }
}
</script>

<style lang="scss" scoped>
  .account {
    h3 {
      font-weight: normal;
      font-size: 14px;
      color: #324157;
    }
  }
</style>
